<template>
  <!-- 这里是商品管理那里需要走接口的筛选 还有一种方法就是在页面手动添加,筛选那里放出来了清空的按钮,然后搜索框可以放到btn-before里面-->
  <div class="search-select">
    <el-select v-model="searchCate" :placeholder="label" clearable @change="inputHanlder">
      <el-option
        v-for="(item, index) in cateData"
        :key="index"
        :value="item.id"
        :label="item.title"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    props: ['label', 'value'],
    data() {
      return {
        cateData: [],
        searchCate: this.value,
      };
    },
    watch: {
      value() {
        this.searchCate = this.value;
      },
    },
    created() {
      this.getCateData();
    },
    methods: {
      inputHanlder() {
        this.$emit('input', this.searchCate);
      },
      // 得到分类数据
      getCateData() {
        this.$service.MallCategoryList({ page: 1, size: 100 }).then((res) => {
          this.cateData = res.rows;
        });
      },
    },
  };
</script>
